<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        body{
            background-color: rgb(192, 219, 244);
        }
        .frit{
            margin: auto;
           /* border: 2px saddlebrown solid;*/
            width: 870px;
            height: 650px;
            display: flex;
            flex-wrap: wrap;
           justify-content:space-around;
        }
        img{
            width: 200px;
            height: 300px;
        }
        .second{
            margin: auto;
            width: 1260px;
            height: 630px;
            display: flex;
            
            
        }
        .before{
            width: 500px;
            height: 615px;
           /* border: 2px red solid;*/
            display: grid;
            grid-template-columns: 600px;
            grid-template-rows: 314px;
            grid-template-areas: 
            "huawei "
            "huawei1";
            
         
        }
       
        .one{
            width: 505px;
           height: 300px;
           grid-area: huawei;

        }
        .one1{
            width: 250px;
            height: 300px;
            grid-area: huawei1;
    
        }
       /* .one2{
            width: 250px;
            height: 300px;
           grid-area: one2;
        }*/
        .two{
            width: 250px;
            height: 300px;
           
        }
        .back{
            padding-left: 10px;
            width: 500px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr ;
            column-gap: 5px;
        }
  
        
      
    </style>
</head>
<body>
    <div class="frit">
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a1.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a2.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a3.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a4.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a5.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a6.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a7.jpg" alt=""></div>
        <div class="photograph"><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/a8.jpg" alt=""> </div>
    </div>
    <div class="second">
        <div class="before">
        <div class="huawei"><img class="one" src="./01.jpg" alt=""> </div>

        <div class="huawei1"><img class="one1" src="./09.jpg" alt="">
        <img class="one1" src="./05.jpg" alt="">
         </div>
    </div>
    <div class="back">
        <div ><img class="two" src="./02.jpg" alt=""></div>
        <div ><img class="two" src="./03.jpg" alt=""></div>
        <div ><img class="two" src="./04.jpg" alt=""></div>
        <div ><img class="two" src="./07.jpg" alt=""></div>
        <div ><img class="two" src="./08.jpg" alt=""></div>
        <div ><img class="two" src="./009.jpg" alt=""></div>
    </div>
    </div>
</body>
</html>